<template>
  <div class="tabbar_con">
    <div>
      <ul class="tabbar_title">
        <li @mouseenter="i=0">近期优惠</li>
        <li @mouseenter="i=1">学校活动</li>
        <li @mouseenter="i=2">热门新闻</li>
      </ul>
      <ul class="tabbar_cont">
        <li>
          <img src="@/assets/image/shuqi.jpg" alt />
          <ul class="tabbar_list" v-show="i===0">
            <li class="tab_item" v-for="(item,index) in tabList1" :key="index">{{item.title}}</li>
          </ul>
          <ul class="tabbar_list" v-show="i===1">
            <li class="tab_item" v-for="(item1,index1) in tabList2" :key="index1">{{item1.title}}</li>
          </ul>
          <ul class="tabbar_list" v-show="i===2">
            <li class="tab_item" v-for="(item2,index2) in tabList3" :key="index2">{{item2.title}}</li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="tabbar_right">
      <div class="right_title">实用工具</div>
      <div class="right_list" style>
        <div>
          <img class="right_img" src="@/assets/image/客服.png" alt />
          <div>在线咨询</div>
        </div>
        <div>
          <img class="right_img" src="@/assets/image/选课.png" alt />
          <div>快捷选课</div>
        </div>
        <div>
          <img class="right_img" src="@/assets/image/时间.png" alt />
          <div>考试时间</div>
        </div>
        <div>
          <img class="right_img" src="@/assets/image/报考.png" alt />
          <div>报考指南</div>
        </div>
        <div>
          <img class="right_img" src="@/assets/image/下载.png" alt />
          <div>机经下载</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabList1: [],
      tabList2: [],
      tabList3: [],
      isshow: false,
      i: 0
    };
  },
  methods: {},
  mounted() {
    this.$http
      .get("http://47.92.50.43:8888/art/articlelist", {
        params: {
          sectionid: 8,
          pageSize: 5
        }
      })
      .then(res => {
        this.tabList1 = res.data;
      });
    this.$http
      .get("http://47.92.50.43:8888/art/articlelist", {
        params: {
          sectionid: 9,
          pageSize: 5
        }
      })
      .then(res => {
        this.tabList2 = res.data;
      });
    this.$http
      .get("http://47.92.50.43:8888/art/articlelist", {
        params: {
          sectionid: 10,
          pageSize: 5
        }
      })
      .then(res => {
        this.tabList3 = res.data;
      });
    // var tab = document.getElementsByClassName("tab_item");
  }
};
</script>

<style>
.tabbar_con {
  width: 950px;
  display: flex;
  padding-left: 200px;
}
.tabbar_title {
  width: 654px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 22px;
  line-height: 40px;
  font-weight: lighter;
}
.tabbar_title li {
  width: 32%;
  border-bottom: 1px solid #333;
  padding: 0 20px;
  box-sizing: border-box;
}
.tabbar_title li:hover {
  font-weight: bold;
  color: #2181f0;
  border-bottom: 1px solid #2181f0;
}
.tabbar_cont {
  display: flex;
}
.tabbar_cont > li {
  display: flex;
}
.tabbar_cont img {
  width: 250px;
  height: 170px;
  margin: 20px;
}
.tabbar_list {
  margin-top: 20px;
  text-align: left;
}
.tabbar_list > .tab_item {
  /* display: none; */
}
.tabbar_list li {
  margin: 10px;
  width: 310px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tabbar_right {
  height: 272px;
  margin-left: 20px;
}

.tabbar_right > .right_title {
  font-size: 20px;
  font-weight: bolder;
  margin: 10px;
  display: flex;
  margin-top: 26px;
  margin-left: 20px;
}

.tabbar_right .right_img {
  margin: 10px 0;
  height: 34px;
}

.right_list {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
}

.right_list > div {
  width: 78px;
  padding: 10px 0;
}
</style>